<template>
<div>
    <div class="block">
        <span class="demonstration">欢迎来到员工信息管理系统</span>
        <el-carousel height="150px">
            <el-carousel-item>
                <!-- <img :src="$store.state.shop.shopList[0].shopPic" alt=""> -->
                 <img src="../assets/1.jpg" alt="">
            </el-carousel-item>
            <el-carousel-item>
                 <img src="../assets/3.jpg" alt="">
            </el-carousel-item>
            <el-carousel-item>
                 <img src="../assets/4.jpg" alt="">
            </el-carousel-item>
        </el-carousel>
  </div>
    
   <!--  <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-scrollbar"></div>
    </div> -->
  
</div>
</template>
 
<script>
    // import Swiper from "swiper"; 
    // import "../../node_modules/_swiper@5.3.6@swiper/css/swiper.min.css";
    export default {
        
        data(){
            return{
                img:[],
                q:""
            }
        },
        mounted(){
            // await this.$store.dispatch("getShopList")
            //  console.log(this.$store.state.shop.shopList[0].shopPic)
            //  this.q=this.$store.state.shop.shopList[0].shopPic
            for(var i=0; i<4;i++){
                this.img.push(`../assets/${i+1}.jpg`)
            }
            // console.log(this.img)

            /* new Swiper ('.swiper-container', {
                loop: true,
                direction:"horizontal",
                pagination:{
                    el:'.swiper-pagination'
                }
            }) */
            
            
            }
        
    }
</script>

<style lang="less" scoped>
    .demonstration{
        display: block;
        font-size: 40px;
        color: blueviolet;
        text-align: center;
    }
    .el-carousel{
        width: 600px;
        height: 400px;
        margin: 20px auto;
        .el-carousel__item{
            width: 600px;
            height: 400px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>